# DevTools

Elf provides built-in integration with the Redux DevTools Chrome extension.

## Usage

Install the Redux extension from the supported App stores ( [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/) ).

And call the `devtools()` method:

```ts
import { devTools } from '@ngneat/elf-devtools';

devTools();
```

## Options

The plugin supports the following options passed as the second function parameter:

`maxAge` - Maximum amount of actions to be stored in the history tree.

`preAction` - A method that's called before each action.

`actionsDispatcher` - Observable of actions. For example actions created by [@ngneat/effects](https://github.com/ngneat/effects)

`logTrace`: Outputs a console.trace() for each action in the console.

`postTimelineUpdate` - A function that'll be invoked after the devtools timeline updates. For example, you can run a change detection when working with Angular:

```ts
import { ApplicationRef } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { devTools } from '@ngneat/elf-devtools';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then((moduleRef) => {
    devTools({
      postTimelineUpdate: () => moduleRef.injector.get(ApplicationRef).tick(),
    });
  });
```

## Display actions from [@ngneat/effects](https://github.com/ngneat/effects)

### Angular

```ts
import { EffectsNgModule, Actions } from '@ngneat/effects-ng';
import { SampleEffects } from 'sample/sample.effect.ts';
import { devTools } from '@ngneat/elf-devtools';

export function initElfDevTools(actions: Actions) {
  return () => {
    devTools({
      name: 'Sample Application',
      actionsDispatcher: actions,
    });
  };
}

@NgModule({
  imports: [
    // other modules
    EffectsNgModule.forRoot([SampleEffects]),
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      useFactory: initElfDevTools,
      deps: [Actions],
    },
  ],
})
export class AppModule {}
```
